/*
Theme Name: xmt
Theme URI: http://templates.silversite.pl/snaps/demo/
Description: Creative Template is based on the latest standarts for Bootstrap and Wordpress.
Author: piexl
Author URI: www.piexl.net
Version: 0.0.1
Text Domain: xmt
License: GNU General Public License version 3.0
License URI: http://amazeui.org/1.x/
*/





// 清除浏览器的默认样式开始
* { margin: 0; padding: 0; list-style: none; }
/* KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com> */
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ { margin: 0; padding: 0; }
/** 设置默认字体 **/
body, button, input, select, textarea /* for ie */ { font: 12px/1.5 tahoma, arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; }
/* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
/* 统一等宽字体 */
small { font-size: 12px; }
/* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: none; }
/** 重置表单元素 **/
legend { color: #000; }
/* for ie6 */
fieldset, img { border: 0; }
/* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; }
/* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
// 清除浏览器的默认样式结束

.fl{float:left;}
.fr{float:right;}
.cl{clear:both;}


//文字的堆砌方式
.text-left{
	text-align:left;
}
.text-right{
	text-align:right;
}
.text-center{
	text-align:center;
}


//透明度
.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

//垂直居中对其的盒子
.center_v{
    /* Center vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}


//input的placeholder颜色
.placeholder(@color: @input-color-placeholder){
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

.animation(@name,@duration,@speed,@delay,@number,@direction, @mode){
  //@name 动画的名称
  //@duration 规定动画完成一个周期所花费的秒或毫秒
  //@speed 规定动画完成一个周期所花费的秒或毫秒 
          //linear (动画从头到尾的速度是相同的)
          //ease (默认。动画以低速开始，然后加快，在结束前变慢。)
          //ease-in (动画以低速开始。)
          //ease-out (动画以低速结束。)
          //ease-out (动画以低速结束。)
          //ease-in-out (动画以低速开始和结束。)
          //cubic-bezier(n,n,n,n) (在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。)
  //@delay 定义动画开始前等待的时间，以秒或毫秒计
  //@number 定义动画播放次数的数值 n 或 infinite（规定动画应该无限次播放）。 
  //@direction 规定动画是否在下一周期逆向地播放。normal（默认值。动画应该正常播放。） alternate（动画应该轮流反向播放。）； 
  //@State 规定动画是否在下一周期逆向地播放。 paused（规定动画已暂停。） running（规定动画正在播放。）； 
  //@direction 规定动画是否在下一周期逆向地播放。 
  //@mode 规定动画是否在下一周期逆向地播放。  
          //none(不改变默认行为。)
          //forwards(当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）)
          //backwards(在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）)
          //both(向前和向后填充模式都被应用)

animation: @name @duration @speed @delay @number @direction @mode;
-moz-animation:@name @duration @speed @delay @number @direction @mode;
-webkit-animation:@name @duration @speed @delay @number @direction @mode;
-o-animation:@name @duration @speed @delay @number @direction @mode;
}

//动画的定义
.suoxiao1{
  from {width: 10%; bottom: 21%;}
  to {width: 3%; bottom: 25%;}
}
@keyframes suoxiao1{ .suoxiao1 }
@-moz-keyframes suoxiao1{ .suoxiao1 }
@-webkit-keyframes suoxiao1 { .suoxiao1 }
@-o-keyframes suoxiao1 { .suoxiao1 }
// 动画的调用
.hc_suoxiao1{
  .animation(@name:suoxiao1,@duration:2s,@speed:ease-in-out,@delay:0,@number:1,@direction:normal,@mode:forwards);
}


body{
	background-color:#1e1e1e;
	font-size:14px;
	color:#fff;
	max-width:100%;
	overflow-x:hidden;
}
@media only screen and (min-width:1200px) and (max-width: 767px){

}
header{
	position:fixed;
	top:0;
	left:0;
	background-color:#1d1d1d;
	width:94%;
	padding:15px 3%;
	z-index:100;
	border-bottom:1px solid #a6a6a6;
	.right{
		padding-top: 10px;
	}
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	.navbtn{
		padding:0.5em 1em;
		border:0;
		background-color:#999;
		&:hover{
			background-color:#8d0303;
			color:#fff;
		}
	}

}



footer{
	width:100%;
	background-color:#1d1d1d;
	padding:15px 0;
	position:fixed;
	bottom:0;
	left:0;
	color:#999;
	text-align:center;
	z-index:100;
	span{
		padding:0 2em;
	}
}


//首页首屏背景动画
.imageAnimation{
	0% {
	    animation-timing-function: ease-in;
	    -moz-animation-timing-function: ease-in;
	    -o-animation-timing-function: ease-in;
	    -webkit-animation-timing-function: ease-in;
	    -moz-ttransform: scale(1.2) rotate(2deg);
	    -o-transform: scale(1.2) rotate(2deg);
	    -webkit-transform: scale(1.2) rotate(2deg);
	}
	25% {
	    transform: scale(1.1) rotate(0deg);
	    -moz-transform: scale(1.1) rotate(0deg);
	    -o-transform: scale(1.1) rotate(0deg);
	    -webkit-transform: scale(1.1) rotate(0deg);
	}
	100% {
		transform: scale(1.0) rotate(0deg);
		-moz-transform: scale(1.0) rotate(0deg);
		-o-ransform: scale(1.0) rotate(0deg);
		-webkit-transform: scale(1.0) rotate(0deg);
	}
}
@keyframes imageAnimation{ .imageAnimation }
@-moz-keyframes imageAnimation{ .imageAnimation }
@-webkit-keyframes imageAnimation { .imageAnimation }
@-o-keyframes imageAnimation { .imageAnimation }

img{
max-width:100%;
}


//首页样式开始
.home{
	margin:86px 0  0 0;
	.cd-fixed-background {
	  position: relative;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-position: center center;
	  background-attachment:fixed;
	  .cd-content{
	  	max-width:1200px;
	  	margin:0 auto;
	  }
	  &.img-1{
	  	height:100%;
	  	background-image:url(dist/images/bg.jpg);
	  	.animation(@name:imageAnimation,@duration:10s,@speed:ease-in-out,@delay:0,@number:1,@direction:normal,@mode:forwards);
	  	.coverbg{
	  		width:100%;
	  		height:100%;
	  		background-color:rgba(0,0,0,0.7);
	  		text-align:center;
	  		.center_v;
	  		img{
	  			max-width:100%;
	  		}
	  	}
	  }
	  &.img-2{
	  	background-color:#1d1d1d;
	  	padding:100px 0;
	  	padding-bottom:0;
	  	.left{
	  		width:514px;
	  		padding-top:40px;
	  		.top{
	  			width:606px;
	  			margin-left:-92px;
	  		}
	  		.bottom{
	  			text-align:center;
	  			margin:2em 0;
	  			a{
	  				padding:0.5em 3em;
	  				background-color:#d3d2d1;
	  				border-radius:2em;
	  				color:#333;
	  				&:hover{
	  					background-color:#fff;
	  				}
	  			}
	  			p{
	  				margin:0.5em 0;
	  			}
	  		}
	  	}
	  	.right{
	  		width:600px;
	  		margin-left:20px;
	  		.top{
	  			margin-bottom:1em;
	  			width:100%;
	  		}
	  		.bottom_text{
	  			width:100%;
	  			margin:10px 0 20px 0;
				font-size:12px;
				color:#666;
				line-height:1.2em;
	  		}
  			.tab-nav{
  				padding-top:40px;
  				li{
  					display:inline-block;
  					padding:0.3em 1em;
  					color:#333;
  					background-color:#b6b6b6;
  					border-radius:3px;
  					margin:0.3em;
  					cursor:pointer;
  					&.active{
  						background-color:#fff;
  					}
  				}
  				li.active{
  					background-color:#fff;
  				}
  			}
	  		.tab-content{
	  			padding:50px 25px;
	  			height:400px;
	  			background-color:#2d2d2d;
	  			overflow:auto;
	  			h3{
	  				font-size:24px;
	  				margin-bottom:0.5em;
	  			}
	  			h4{
	  				margin-bottom:1em;
	  			}
	  			p{
	  				margin-bottom:2em;
	  				text-indent:2em;
	  				line-height:2em;
	  			}
	  			li{
	  				display:none;
	  				&.show{
	  					display:block;
	  				}
	  			}
	  		}
	  	}

	  }
	}
	.tip{
		position:fixed;
		width:20px;
		z-index:110;
		bottom:0;
		left:50%;
		text-align:center;
		line-height:1em;
		img{
			width:100%;
		}
	}
	.footer{
		width:100%;
		padding:15px 0;
		color:#999;
		text-align:center;
		span{
			padding:0 2em;
			font-size:12px;
		}
	}
}

//联系我们页面
.contact{
	width:100%;
	margin:86px 0  81px 0;
	background:#1f1f1f url(dist/images/contactbg.jpg) no-repeat center center;
	.center_v;
	.content{
		width:100%;
		margin:0 auto;
		text-align:right;
	}
}

//图片的展示
.imgs{
	width:100%;
	margin:86px 0  81px 0;
	padding-top:20px; 
	#wrapper{width:96%; padding:0 2%;}
	#container{position:relative; margin:0 auto; padding-bottom:10px;}
	#wrapper{
		.grid{
			width:188px;
			min-height:100px;
			padding:15px;
			color:#333;
			background:#ECECEC;
			margin:8px;
			font-size:12px;
			float:left;
			overflow:hidden;
			box-shadow:0 1px 3px rgba(34,25,25,0.4);
			-moz-box-shadow:0 1px 3px rgba(34,25,25,0.4);
			-webkit-box-shadow:0 1px 3px rgba(34,25,25,0.4);
			-webkit-transition:top 1s ease, left 1s ease;
			-moz-transition:top 1s ease, left 1s ease;
			-o-transition:top 1s ease, left 1s ease;
			-ms-transition:top 1s ease, left 1s ease;
			&:hover{
				background-color:#fff;
			}
			strong{
				border-bottom:1px solid #ccc;
				margin:10px 0;
				display:block;
				padding:0 0 5px;font-size:17px;
			}
			.imgholder{
				img{
					width:100%;
					background:#ccc;
					display:block;
					cursor:pointer;
					background:url(dist/images/loding.gif) no-repeat center;
				}
			}
		}
	}
	.dialog{
		width:100%;
		height:100%;
		display:none;
		position:fixed;
		overflow:auto;
		padding:40px 0;
		top:0;
		left:0;
		background-color:rgba(229,229,229,.95);
		color:#252525;
		z-index:1000;
		.close-layer{
			position:fixed;
			top:10px;
			right:20px;
			.close_btn{
				border:0;
				width:80px;
				height:41px;
				cursor:pointer;
				background:transparent url(dist/images/close.png) no-repeat 0 0;
				&:hover{
					background-position:0 -41px;
				}
			}
		}
		.dialog-content{
			width:80%;
			margin:0 10%;
			margin-bottom:100px;
			.img{
				.center_v;
				img{
					width:100%;
				}
			}
			h3{
				margin-top:10px;
				font-size:16px;
			}
		}
		.pin-view-arrows{
			position:fixed;
			width:100%;
			top:50%;
			z-index:1001;
			margin-top:-75px;
			button{
				width:60px;
				height:150px;
				border:0;
				position:absolute;
				top:0;
				background:transparent url(dist/images/pin_view_arrows.png) no-repeat 0 0;
				&.prev{
					left:10px;
					background-position:0 0;
					&:hover{
						background-position:0 -170px;
					}
				}
				&.next{
					right:10px;
					background-position:-80px 0;
					&:hover{
						background-position:-80px -170px;
					}
				}
			}
		}
	}
}


//导航条的相应样式
@media only screen and (min-width:1140px){
	header .navbtn{
		display:none;
	}
	header .nav{
		li{
			float:left;
			a{
				display:inline-block;
				width:127px;
				height:44px;
				color:#999;
				.opacity(0.9);
				text-align:center;
				line-height:44px;
				text-indent:-99999em;
				background:url(dist/images/navbg.png) no-repeat 0 -44px;
				&:hover{
					color:#fff;
					.opacity(1);
				}
			}
		}
		.nav1 a{background-position:0 -44px;}
		.nav2 a{background-position:-127px -44px;}
		.nav3 a{background-position:-254px -44px;}
		.nav4 a{background-position:-381px -44px;}
		.nav5 a{background-position:-508px -44px;}
		.nav6 a{background-position:-635px -44px;}
		.nav1.active a{background-position:0 0;}
		.nav2.active a{background-position:-127px 0;}
		.nav3.active a{background-position:-254px 0;}
		.nav4.active a{background-position:-381px 0;}
		.nav5.active a{background-position:-508px 0;}
		.nav6.active a{background-position:-635px 0;}
	}
	.imgs #wrapper .grid{
		width:14%;
		margin:0 2%;
		padding:10px 1%;
		margin-bottom:20px;
	}
	.imgs{
		.nav{
			text-align:center;
			padding:30px 0;
			li{
				display:inline-block;
				a{
					display:inline-block;
					width:140px;
					height:65px;
					text-indent:-999em;
					margin:0 2em;
					background:url(dist/images/nav_img.png) no-repeat 0 0;
					&.nav1{
						&.active{
							background-position:0 -74px;
						}
					}
					&.nav2{
						background-position:-200px 0;
						&.active{
							background-position:-200px -74px;
						}
					}
				}
			}
		}
	}
	.home{
		.img-2{
			.cd-content{
				.left,.right{
					float:left;
				}
			}
		}
	}
}
@media only screen and (min-width:940px) and (max-width:1140px){
	header .navbtn{
		display:none;
	}
	header .nav{
		li{
			float:left;
			a{
				padding:0.5em 1em;
				background-color:#333;
				display:inline-block;
				.opacity(0.9);
				color:#fff;
				cursor:pointer;
				margin:0 1em;
				border-radius:3px;
			}
			&.active{
				a{
					background-color:#8D0303;
					color:#fff;
				}
			}
		}
	}
	.imgs #wrapper .grid{
		width:19%;
		margin:0 2%;
		padding:10px 1%;
		margin-bottom:20px;
	}
	.imgs{
		.nav{
			text-align:center;
			padding:30px 0;
			li{
				display:inline-block;
				a{
					display:inline-block;
					width:140px;
					height:65px;
					text-indent:-999em;
					margin:0 2em;
					background:url(dist/images/nav_img.png) no-repeat 0 0;
					&.nav1{
						&.active{
							background-position:0 -74px;
						}
					}
					&.nav2{
						background-position:-200px 0;
						&.active{
							background-position:-200px -74px;
						}
					}
				}
			}
		}
	}
	.home{
		.img-2{
			.cd-content{
				.left,.right{
					width:80%;
					margin:40px 10%;
					text-align:center;
				}
				.left .top{
					display:inline-block;
				}
			}
		}
	}

}

@media only screen and(max-width:940px)and(min-width:640px){
	header{
		.right{
			position:relative;
		}
		.navbtn{
			display:block;
			position:absolute;
			top:10px;
			right:0;
		}
		.nav{
			display:none;
			position:absolute;
			top:10px;
			right:84px;
			width:100px;
			li{
				text-align:center;
				a{
					padding:0.5em 1em;
					background-color:#333;
					display:inline-block;
					width:100%;
					.opacity(0.9);
					color:#fff;
					cursor:pointer;
					margin:0 1em;
				}
				&.active{
					a{
						background-color:#8D0303;
						color:#fff;
					}
				}
			}
		}
	}
	.imgs #wrapper .grid{
		width:27%;
		margin:0 2%;
		padding:10px 1%;
		margin-bottom:20px;
	}
	.imgs{
		.nav{
			text-align:center;
			padding:30px 0;
			li{
				display:inline-block;
				a{
					display:inline-block;
					width:140px;
					height:65px;
					text-indent:-999em;
					margin:0 2em;
					background:url(dist/images/nav_img.png) no-repeat 0 0;
					&.nav1{
						&.active{
							background-position:0 -74px;
						}
					}
					&.nav2{
						background-position:-200px 0;
						&.active{
							background-position:-200px -74px;
						}
					}
				}
			}
		}
	}
	.home{
		.img-2{
			padding-to:40px;
			.cd-content{
				.left,.right{
					width:96%;
					margin:40px 2%;
					margin-top:0;
					text-align:center;
				}
				.left .top{
					width:100%;
					padding-left:0;
					display:inline-block;
				}
				.title,.tab-nav{
					float:none;
				}
				.right .tab-nav{
					padding-top:20px;
				}
				.right .tab-content{
					padding:30px 3%; 
				}
			}
		}
	}
}
@media only screen and(max-width:640px){
	header{
		.right{
			position:relative;
		}
		.navbtn{
			display:block;
			position:absolute;
			top:10px;
			right:0;
		}
		.nav{
			display:none;
			position:absolute;
			top:10px;
			right:84px;
			width:100px;
			li{
				text-align:center;
				a{
					padding:0.5em 1em;
					background-color:#333;
					display:inline-block;
					width:100%;
					.opacity(0.9);
					color:#fff;
					cursor:pointer;
					margin:0 1em;
				}
				&.active{
					a{
						background-color:#8D0303;
						color:#fff;
					}
				}
			}
		}
	}

	.imgs #wrapper .grid{
		width:44%;
		margin:0 2%;
		padding:10px 1%;
	}
	.imgs{
		.nav{
			text-align:center;
			padding:30px 0;
			li{
				display:inline-block;
				a{
					display:inline-block;
					padding:0.5em 1em;
					margin:0 1em;
					color:#fff;
					background-color:#333;
					&.active{
						background-color:#8D0303;
					}
				}
			}
		}
	}
	.contact  .content{
		width:80%;
		margin:10 auto;
		text-align:right;
	}
	.imgs .dialog .dialog-content{
		margin-top:30px;
	}
	.imgs .dialog .pin-view-arrows{
		bottom:0;
		button{
			bottom:10px;
			width:25px;
			height:100px;
			background:transparent url(dist/images/pin_view_arrows.png) no-repeat -160px 0;
			margin-top:-50px;
		}
		button.prev{
			left:0;
			background-position:-160px 0;
			&:hover{
				background-position:-160px -170px;
			}
		}
		button.next{
			right:0;
			background-position:-210px 0;
			&:hover{
				background-position:-210px -170px;
			}
		}
	}
	.home{
		.img-2{
			padding-to:40px;
			.cd-content{
				.left,.right{
					width:96%;
					margin:40px 2%;
					margin-top:0;
					text-align:center;
				}
				.left .top{
					width:100%;
					padding-left:0;
					display:inline-block;
				}
				.title,.tab-nav{
					float:none;
				}
				.right .tab-nav{
					padding-top:20px;
				}
				.right .tab-content{
					padding:30px 3%; 
				}
			}
		}
	}

	
}
